<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<body>
  <div id="toolbar">
    <input class="easyui-textbox" data-options="width: 200, type: 'text', prompt: '输入查询关键字'">
    <a id="search" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls: 'icon-search'">
      查询
    </a>
  </div>
  <!-- <div id="footer">
    <a class="easyui-linkbutton" data-options="iconCls: 'icon-add'">添加</a>
    <a class="easyui-linkbutton" data-options="iconCls: 'icon-edit'">编辑</a>
    <a class="easyui-linkbutton" data-options="iconCls: 'icon-remove'">移除</a>
  </div> -->
  <table id="datagrid">
    <thead>
      <tr>
        <th data-options="field: 'identifier', sortable: true, order: 'asc', align: 'right'">标识</th>
        <th data-options="field: 'userName', halign: 'center', width: 200, formatter: removeSpace">用户名</th>
        <th data-options="field: 'age'">年龄</th>
        <th data-options="field: 'email', fixed: true, formatter: removeSpace">邮件地址</th>
        <th data-options="field: 'registrationTime', styler: dateStyler">注册时间</th>
      </tr>
    </thead>
  </table>
  <script type="text/javascript">
    function removeSpace(value, row, index) {
      //将空格替换为空字符
      value = value.replace(' ', '');
      return value;
    }
    function dateStyler(value, row, index) {
      if (value.indexOf("20") > -1) {
        return 'background-color: #ffee00; color: red';
      }
    }
    $(function () {
      $("#datagrid").datagrid({
        //url : 'data.json',
        //url: '${pageContext.request.contextPath}/datagrid-server',
        //求远程数据的方法类型
        //method: 'get',
        //顶部工具栏的DataGrid面板。可能的值：一个数组，每个工具属性都和linkbutton一样；选择器指定的工具栏
        toolbar : '#toolbar',
        //面板页脚
        footer : '#footer',
        //在请求远程数据的时候发送额外的参数。默认值为{}
        //这个方法会被datagrid的load方法取代：$(this).datagrid('load', {})
        /* queryParams: {
          //name: 'value',
          //...
        }, */
        //一次性排序的列的名称
        sortName : 'identifier',
        //列的一次性排序顺序，只能是'asc'或'desc'
        sortOrder : 'asc',
        //自动展开/收缩列的大小以适应网格的宽度，默认值为false
        //fitColumns: true,
        //是否从服务器对数据进行排序，默认值为true
        remoteSort : false,
        //是否显示斑马线效果，默认值为false
        striped : true,
        //是否在同一行中显示数据，设置为true可以提高加载性能。默认值为true
        //nowrap: false,
        //从远程站点加载数据的时候显示提示消息，默认值为“Processing, please wait …”
        loadMsg : '正在处理，请稍候...',
        //只允许选择一行，默认值为false
        //singleSelect : true,
        width : '70%',
        //添加一个当前指定样式到面板
        style: {
          margin: 'auto'
        },
        //是否在底部显示分页工具栏，默认值为false
        pagination : true,
        //标识字段
        idField : 'identifier',
        pageSize : 10,
        pageList : [ 10, 20, 30, 40, 50 ],
        //显示一个行号列，默认值为false
        rownumbers : true
      });
      $("#search").linkbutton({
        onClick : function () {
          console.log("hello");
          var options = $(".datagrid-pager.pagination").pagination('options');
          //为url赋值
          $("#datagrid").datagrid("options").url = "${pageContext.request.contextPath}/datagrid-server";
          console.log(options);
          console.log('pageSize=' + options['pageSize']);
          console.log('pageNumber=' + options['pageNumber']);
          var keyword = $(".textbox-value").val();
          $("#datagrid").datagrid('load', {
            operation: "selectByKeyword",
            "keyword": keyword
          })
        }
      });
    })
  </script>
</body>
</html>
